<template>
	<el-cascader ref="operatorRef" v-model="operatorValue" filterable style="margin-right: 10px;width:140px;"
		:show-all-levels="true" :options="cascaderOptions" :props="props" @change="onChange"></el-cascader>

	<template v-if="model.type=='datetime' && !~operatorValue.indexOf('empty')">
		<template v-if="~model.operator.indexOf('between datediff') && model.value && model.value.length==3">

			<el-input @keydown="blockInvalidKey" type="number" max="3" maxlength="3" step="1" v-model="model.value[1]"
				placeholder="请输入" style="width: 280px;" input-style="text-align: center;">
				<template #prepend>
					<el-select v-model="model.value[0]" placeholder="选择" style="width: 72px;">
						<el-option label="过去" value="past" />
						<el-option label="未来" value="future" />
					</el-select>
				</template>
				<template #append>
					<div style="width: 30px;">
						{{ymd}}
					</div>
					<el-select v-model="model.value[2]" placeholder="选择" style="width: 75px;">
						<el-option label="之前" value="before" />
						<el-option label="之后" value="after" />
						<el-option label="至今" value="now" />
					</el-select>
				</template>
			</el-input>
		</template>
		<template v-else-if="model.operator.startsWith('datediff') && model.value && model.value.length==3">
			<el-select @change="selectChange" v-model="model.value[0]" placeholder="选择" style="width: 100px;">
				<el-option label="等于" value="=" v-if="ymd" />
				<el-option label="早于" value=">" />
				<el-option label="晚于" value="<" />
				<el-option label="早于等于" value=">=" />
				<el-option label="晚于等于" value="<=" />
				<el-option label="属于" value="in" v-if="ymd && ymd != '天'" />
			</el-select>

			<template v-if="model.value[0]=='in'">
				&nbsp; <el-input-tag style="width: 250px;" delimiter="," v-model="model.value[2]" placeholder="请输入"
					aria-label="输入后请按回车键确认" clearable />
			</template>

			<template v-else>

				&nbsp;&nbsp;

				<el-select filterable clearable v-model="model.value[1]" style="width: 180px;" :multiple="false">
					<el-option v-for="(t, index) in timeSelectOp" :key="index" :label="t.label" :value="t.value" />
				</el-select>

				&nbsp;&nbsp;

				<template v-if="model.value[0]=='='">
					<div style="color:#f56c6c;font-weight: bold;">
						同一{{ymd}}
					</div>
				</template>

				<el-input-number v-else :controls="false" v-model="model.value[2]" :min="0" v-if="ymd"
					style="width: 120px;">
					<template #suffix>
						{{ymd}}以上
					</template>
				</el-input-number>

			</template>

		</template>
		<template v-else>
			<div style="width:400px">
				<blDatePicker v-model="model.value">
				</blDatePicker>
			</div>
		</template>
	</template>

</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				/*
								timeSelectOp: [

								],*/
				props: {
					value: 'id',
					label: 'name',
					leaf: 'isLeaf',
					multiple: false,
					emitPath: false,
					disabled: (data, node) => {
						return false;
					}
				},
				cascaderOptions: [{
						name: '时间区间',
						id: 'between'
					}, {
						name: '相对时间',
						id: '',
						children: [{
							name: '年',
							id: 'between datediff year'
						}, {
							name: '月',
							id: 'between datediff month'
						}, {
							name: '天',
							id: 'between datediff day'
						}]
					},
					{
						name: '时间比较',
						id: '',
						children: [{
							name: '时间',
							id: 'datediff second'
						}, {
							name: '按年',
							id: 'datediff year'
						}, {
							name: '按月',
							id: 'datediff month'
						}, {
							name: '按天',
							id: 'datediff day'
						}]
					},
					{
						name: '为空',
						id: 'is empty'
					},
					{
						name: '不为空',
						id: 'is not empty'
					}
				]
			};
		},
		props: {
			modelValue: {
				type: String,
				default: ""
			},
			params: {
				type: Object,
				default: () => {}
			},
			options: {
				type: Object,
				default: () => {}
			}
		},
		mounted() {
			/*
			this.timeSelectOp = []
			this.forNode(this.options, (node) => {
				if (node.type == "datetime") {
					this.timeSelectOp.push({
						label: node.id.replace(/^[^_]*\_/, '').replace("_", "/").replace(".", "/"),
						value: node.id
					});
				}
			})

			this.timeSelectOp.push({
				label: "当前时间",
				value: "getdate()"
			});
*/
		},
		computed: {
			timeSelectOp: {
				get() {
					let temp = [];
					this.forNode(this.options, (node) => {
						if (node.type == "datetime") {
							temp.push({
								label: node.id.replace(/^[^_]*\_/, '').replace("_", "/").replace(".",
									"/"),
								value: node.id
							});
						}
					})

					temp.push({
						label: "当前时间",
						value: "getdate()"
					});

					return temp;
				}
			},
			ymd: {
				get() {
					if (this.modelValue.operator) {
						const parts = this.modelValue.operator.split(' ');
						const last = parts[parts.length - 1];
						return {
							year: '年',
							month: '月',
							day: '天'
						} [last] || "";
					}
					return "";
				}
			},
			model: {
				get() {
					return this.modelValue
				},
				set(value) {
					this.$emit('update:modelValue', value)
				}
			},
			operatorValue: {
				get() {
					return this.modelValue.operator
				},
				set(value) {
					this.modelValue.operator = value;
					this.$emit('update:modelValue', this.modelValue);
				}
			}
		},
		methods: {
			forNode(node, callback) {
				// 检查 node 是否为数组
				if (Array.isArray(node)) {
					// 如果传入的是数组，递归遍历每个元素
					node.forEach(child => this.forNode(child, callback));
				} else {
					// 处理单个节点
					callback(node);
					// 如果有 children 则继续递归
					if (node.children) {
						node.children.forEach(child => this.forNode(child, callback));
					}
				}
			},
			selectChange(e) {
				if (e == "=") {
					this.model.value[2] = "0"
				} else if (e == "in") {
					this.model.value[1] = null;
					this.model.value[2] = [];
				} else {
					if (Array.isArray(this.model.value[1])) {
						this.model.value[1] = null;
					}
				}
			},
			onChange() {
				this.$emit('change', this.modelValue.operator);
			},
			blockInvalidKey(e) {
				if (e.key === '.' || e.key === ',') {
					e.preventDefault()
				}
			}
		}
	};
</script>
